<%@ page import="cn.edu.lingnan.pojo.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    User user = (User) request.getServletContext().getAttribute("user");
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Update User Information</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .update-form-container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            background-color: #f9f9f9;
        }
        .update-form-container h2 {
            margin-bottom: 30px;
        }
        .password-container {
            position: relative;
        }
        .password-container input {
            padding-right: 40px;
        }
        .password-container .toggle-password {
            position: absolute;
            right: 10px;
            top: 70%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .bt1{
            width:40%;
            border-radius: 5%;
            margin-left: 5%;

        }
    </style>
    <script>
        function confirmUpdate() {
            if (confirm('是否确实要更新此信息？')) {
                document.getElementById('updateForm').submit();
            }
        }

        function togglePassword() {
            var passwordField = document.getElementById('password');
            var toggleIcon = document.getElementById('togglePasswordIcon');
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash');
            } else {
                passwordField.type = 'password';
                toggleIcon.classList.remove('fa-eye-slash');
                toggleIcon.classList.add('fa-eye');
            }
        }
    </script>
</head>
<body>
<div class="container">
    <div class="update-form-container">
        <h2 class="text-center" style="color: blue;"><span>更新用户信息</span></h2>
        <form id="updateForm" action="${pageContext.request.contextPath}/update" method="post" accept-charset="UTF-8">
            <div class="form-group">
                <label for="id">ID:</label>
                <input type="text" class="form-control" id="id" name="id" value="${user.id}" readonly>
            </div>
            <div class="form-group">
                <label for="name">姓名:</label>
                <input type="text" class="form-control" id="name" name="name" value="${user.name}">
            </div>
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" class="form-control" id="username" name="username" value="${user.username}">
            </div>
            <div class="form-group password-container">
                <label for="password">密码:</label>
                <input type="password" class="form-control" id="password" name="password" value="${user.password}">
                <span class="toggle-password" onclick="togglePassword()">
                    <i id="togglePasswordIcon" class="fa fa-eye-slash"></i>
                </span>
            </div>
            <div class="form-group">
                <label for="age">年龄:</label>
                <input type="number" class="form-control" id="age" name="age" value="${user.age}">
            </div>
            <div class="form-group">
                <label for="gender">性别:</label>
                <select class="form-control" id="gender" name="gender">
                    <option value="男" ${user.gender == '男' ? 'selected' : ''}>男</option>
                    <option value="女" ${user.gender == '女' ? 'selected' : ''}>女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="major">专业:</label>
                <input type="text" class="form-control" id="major" name="major" value="${user.major}">
            </div>

            <div style="display: flex">
                  <a href="student.jsp" style="width: 40%;height:35px;line-height: 20px;margin-top: 10px;margin-left: 20px;" class="btn btn-secondary btn-block">取消</a>
                <button type="button"  style="width: 40%;margin-left: 10%;" class="btn btn-primary btn-block" onclick="confirmUpdate()">提交</button>
            </div>
        </form>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
</body>
</html>
